<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>一</button>
    <button>二</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
	// 未优化：
	// btns[0].onclick = function(){
	// 	const xhr = new XMLHttpRequest();
	// 	xhr.open("get","/sum?a=1&b=2");
	// 	xhr.send();
	// 	xhr.onload = function(){
	// 		console.log(xhr.response);
    //     }
    // }
	// btns[1].onclick = function(){
	// 	const xhr = new XMLHttpRequest();
	// 	xhr.open("get","/sum?a=100&b=200");
	// 	xhr.send();
	// 	xhr.onload = function(){
	// 		alert(xhr.response);
	// 	}
    // }




    // // 封装一：回调函数
    // function ajax(cb){
	// 	const xhr = new XMLHttpRequest();
	// 	xhr.open("get","/sum?a=1&b=2");
	// 	xhr.send();
	// 	xhr.onload = function(){
	// 		cb(xhr.response);
	// 	}
    // }
	// btns[0].onclick = function(){
	// 	// 输出响应体
	// 	ajax(function(response){
	// 		console.log(response)
    //     });
	// }
	// btns[1].onclick = function(){
	// 	// 弹出响应体
	// 	ajax(function(response){
	// 		alert(response);
    //     });
	// }


	// 封装二：传递参数
	// function ajax(query,cb){
	// 	const xhr = new XMLHttpRequest();
	// 	xhr.open("get","/sum?"+query);
	// 	xhr.send();
	// 	xhr.onload = function(){
	// 		cb(xhr.response);
	// 	}
	// }
	// btns[0].onclick = function(){
	// 	// 输出响应体
	// 	ajax("a=1&b=2",function(response){
	// 		console.log(response)
	// 	});
	// }
	// btns[1].onclick = function(){
	// 	// 弹出响应体
	// 	ajax("a=100&b=200",function(response){
	// 		alert(response);
	// 	});
	// }


    // 封装三：参数优化
	// function ajax(query,cb){
	// 	const xhr = new XMLHttpRequest();
	// 	xhr.open("get","/sum?"+Object.keys(query).map(key=>key+"="+query[key]).join("&"));
	// 	xhr.send();
	// 	xhr.onload = function(){
	// 		cb(xhr.response);
	// 	}
	// }
	// btns[0].onclick = function(){
	// 	// 输出响应体
	// 	ajax({
    //         a:1,
    //         b:2
    //     },function(response){
	// 		console.log(response)
	// 	});
	// }
	// btns[1].onclick = function(){
	// 	// 弹出响应体
	// 	ajax({
    //         a:100,
    //         b:200
    //     },function(response){
	// 		alert(response);
	// 	});
	// }


    // 封装四：封装优化
	function ajax({query,success}){
		const xhr = new XMLHttpRequest();
		xhr.open("get","/sum?"+Object.keys(query).map(key=>key+"="+query[key]).join("&"));
		xhr.send();
		xhr.onload = function(){
			success(xhr.response);
		}
	}
	btns[0].onclick = function(){
		// 输出响应体
		ajax({
            query:{
				a:1,
                b:2
            },
            success(response){
				console.log(response);
            }
        });
	}
	btns[1].onclick = function(){
		// 弹出响应体
		ajax({
            query:{
				a:100,
                b:200
            },
            success(response){
				alert(response);
            }
        })
	}
</script>
</html>